<template>
  <div class="list-wrap">
    <ul>
      <li class="item"
          v-for="item of list"
          :key="item.content"
          @click="handleClick(item)">
        <div class="item-title">
          <i class="iconfont"
             :class="item.className"></i>
          <p class="desc">{{item.content}}</p>
        </div>
        <i class="iconfont icon-xiangyou"></i>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'list',
  data () {
    return {
      list: [
        {
          content: '借款记录',
          className: 'icon-jiekuanjilu',
          url: '/me/record'
        },
        {
          content: '修改密码',
          className: 'icon-xiugaimima',
          url: '/me/modification'
        },
        {
          content: '关于我们',
          className: 'icon-haikezhangguizhushou_guanyuwomen',
          url: '/me/about'
        },
        {
          content: '使用帮助',
          className: 'icon-shiyongbangzhu',
          url: '/me/usinghelp'
        },
        {
          content: '退出登录',
          className: 'icon-tuichu',
          url: '/login'
        }
      ]
    }
  },
  methods: {
    handleClick (item) {
      const url = item.url
      const content = item.content
      const logout = '退出登录'
      if (content === logout) {
        this.logout()
        return false
      } else {
        this.$router.push({
          path: url
        })
      }
    },
    logout () {
      this.$api.user.logOut()
        .then(this.logoutSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    logoutSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$toast.success({
          duration: 1000,
          message: res.msg
        })
        this.$router.push({
          path: '/'
        })
        this.$localStorage.remove('USER_INFO')
        this.$localStorage.remove('authUrl')
        this.$localStorage.remove('person')
        this.$localStorage.remove('contacts')
        this.$localStorage.remove('bank')
      } else if (res.code === this.$api.CODE_ERROR) {
        this.$toast.fail({
          duration: 1000,
          message: res.msg
        })
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.list-wrap
  background $common_bgc
  box-shadow 0px 6px 12px 0px rgba(47, 53, 66, 0.16)
  border-radius 24px

  ul
    width 100%

    li
      width 100%
      height 110px
      display flex
      align-items center
      justify-content space-between
      font-size $shop_name
      font-weight 400
      color $id_input
      padding-left 32px
      padding-right 32px
      box-sizing border-box

      &:active
        background-color $tab_touch

      .item-title
        display flex
        align-items center
        justify-content space-between

        i
          margin-right 64px
          font-size $shop_name
          font-weight 400
          color #747D8C

      i
        font-size $shop_name
        font-weight 400
        color $tabBarColor_one
</style>
